<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PBKDF2加密工具</title>
    <link rel="stylesheet" href="../../bootstrap/bootstrap.min.css">
</head>

<body>
    <div class="container py-5">
        <h1 class="mb-4">PBKDF2加密工具</h1>
        <form>
            <div class="mb-3">
                <label for="password-input" class="form-label">密码</label>
                <input type="password" class="form-control" id="password-input" placeholder="请输入要加密的密码">
            </div>
            <div class="mb-3">
                <label for="salt-input" class="form-label">盐值</label>
                <input type="text" class="form-control" id="salt-input" placeholder="请输入用于加密的盐值">
            </div>
            <div class="mb-3">
                <label for="iterations-input" class="form-label">迭代次数</label>
                <input type="number" class="form-control" id="iterations-input" min="1" value="1000">
            </div>
            <div class="mb-3">
                <label for="key-length-input" class="form-label">密钥长度（位）</label>
                <input type="number" class="form-control" id="key-length-input" min="1" value="256">
            </div>
            <button type="button" class="btn btn-primary" id="encrypt-button">加密</button>
        </form>

        <div class="mt-5">
            <h4 class="mb-4">加密结果:</h4>
            <div class="mb-3">
                <label for="derived-key-input" class="form-label">派生密钥</label>
                <textarea class="form-control" id="derived-key-input" rows="3" readonly></textarea>
            </div>
            <div>
                <label for="base64-derived-key-input" class="form-label">Base64编码的派生密钥</label>
                <textarea class="form-control" id="base64-derived-key-input" rows="3" readonly></textarea>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/crypto.min.js"></script>
    <script>
        const encryptButton = document.querySelector("#encrypt-button");
        const passwordInput = document.querySelector("#password-input");
        const saltInput = document.querySelector("#salt-input");
        const iterationsInput = document.querySelector("#iterations-input");
        const keyLengthInput = document.querySelector("#key-length-input");
        const derivedKeyInput = document.querySelector("#derived-key-input");
        const base64DerivedKeyInput = document.querySelector("#base64-derived-key-input");

        encryptButton.addEventListener("click", function () {
            const password = passwordInput.value;
            const salt = saltInput.value;
            const iterations = parseInt(iterationsInput.value);
            const keyLength = parseInt(keyLengthInput.value);

            const derivedKey = CryptoJS.PBKDF2(password, salt, { keySize: keyLength / 32, iterations: iterations });
            const base64DerivedKey = CryptoJS.enc.Base64.stringify(derivedKey);

            derivedKeyInput.value = derivedKey.toString(CryptoJS.enc.Hex);
            base64DerivedKeyInput.value = base64DerivedKey;
        });
    </script>
</body>

<style>
    form,
    .mt-5 {
        margin-top: 3rem;
        margin-bottom: 3rem;
    }
</style>

</html>